<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
</head>
<body>
红球：<input type="text" id="red_ball_1" name="red_ball_1" class="form-control-static"
          style="display: inline;width: 60px;text-align: center;margin-top: 10px"/>
<input type="text" id="red_ball_2" name="red_ball_2" class="form-control-static"
       style="display: inline;width: 60px;text-align: center"/>
<input type="text" id="red_ball_3" name="red_ball_3" class="form-control-static"
       style="display: inline;width: 60px;text-align: center"/>
<input type="text" id="red_ball_4" name="red_ball_4" class="form-control-static"
       style="display: inline;width: 60px;text-align: center"/>
<input type="text" id="red_ball_5" name="red_ball_5" class="form-control-static"
       style="display: inline;width: 60px;text-align: center"/>
<input type="text" id="red_ball_6" name="red_ball_6" class="form-control-static"
       style="display: inline;width: 60px;text-align: center"/><br/>
蓝球：<input type="text" id="blue_ball_1" name="blue_ball_1" class="form-control-static"
          style="display: inline;width: 60px;text-align: center;margin-top: 10px"/>
<br/>
<button class="btn btn-info" onclick="generateCode()" style="width: 200px;font-size: xx-large;margin-top: 10px">生成
</button>
<span id="generate_date" class="form-control-static" name="generate_date"></span>
<br/>
<button class="btn btn-info" onclick="statistics()" style="width: 200px;font-size: xx-large;margin-top: 10px">统计
</button>
<br/>
<br/>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script>
    function generateCode() {
        $.ajax({
            url: 'generateCode',
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                $('#red_ball_1').val(data.red_ball_1);
                $('#red_ball_2').val(data.red_ball_2);
                $('#red_ball_3').val(data.red_ball_3);
                $('#red_ball_4').val(data.red_ball_4);
                $('#red_ball_5').val(data.red_ball_5);
                $('#red_ball_6').val(data.red_ball_6);
                $('#blue_ball_1').val(data.blue_ball_1);
                $('#generate_date').html(data.generate_date);
            },
            error: function () {

            }
        })
    }

    function statistics() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));//statisticsBlue
        var moption1 = myChart.getOption();
        var xData = [];
        var yData = [];
        $.ajax({
            url: '/statisticsBlue',
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                var length = data.length;
                for (var i = 0; i < length; i++) {
                    if (data[i]['ball'] !== null) {
                        xData.push(data[i]['ball'])
                    }
                    if (data[i]['total'] !== null) {
                        yData.push(data[i]['total']);
                    }
                }
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '双色球-蓝球统计'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    legend: {
                        data: ['蓝球出现次数']
                    },
                    series: [
                        {
                            name: '蓝球出现次数',
                            type: 'bar',
                            barWidth: '60%',
                            data: yData
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function () {
                alert("失败")
            }
        })
    }
</script>